<template>
	<view class="box">
		<!-- 使用 search 组件 -->
		<shop-search>
			
		</shop-search>
		<view class="scroll_box">
			<scroll-view 
					scroll-y="true" 
					class="scroll_aside" 
					:style="{height: windowHeight + 'px'}">
				<view 
						class="aside_item" 
						:class="cate1ActiveIndex === index ? 'active' : ''"
						v-for="(item, index) in categoryMenu" 
						:key="index"
						@click="itemClick(index)">
					{{ item.cat_name }}
				</view>
			</scroll-view>
			
			<!-- 主内容 -->
			<scroll-view 
					scroll-y="true" 
					class="scroll_content" 
					:style="{height: windowHeight + 'px'}">
				<view class="cate_2_box">
					<!-- 二级菜单 -->
					<text 
						class="cate_2_item"
						:class="cate2ActiveIndex === index ? 'cate_2_item_active' : ''"
						v-for="(children, index) in cateLevel2" 
						:key="index"
						@click="cate2Change(index, cate1ActiveIndex)" 
					>
						{{ ' ' + children.cat_name + ' ' }} 
						<text v-if="index !== cateLevel2.length - 1">/</text>
					</text>
				</view>
				
				<view class="cate_3_box">
					<!-- 三级菜单 -->
					<view 
							class="cate_3_item"
							v-for="(item3, index3) in cateLevel3"
							:key="index3"
							@click="gotoGoodsList(item3)">
						<image class="cate_img" :src="item3.cat_icon" mode=""></image>
						<text class="cate3_name">{{item3.cat_name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				windowHeight: 0,		// 当前设备可用高度
				categoryMenu: [],		// 分类菜单
				cate1ActiveIndex: 0,
				cateLevel2: [],			// 二级分类菜单
				cate2ActiveIndex: 0,
				cateLevel3: [],			// 三级分类菜单
				cate3ActiveIndex: 0
			};
		},
		methods: {
			// 获取当前设备的可使用屏幕高度
			getWindowHeight() {
				const sysInfo = uni.getSystemInfoSync()
				// console.log(sysInfo)
				this.windowHeight = sysInfo.windowHeight
			},
			
			// 获取分类菜单
			async getCategoryManu() {
				let {data: res} = await uni.$http.get('https://www.escook.cn/api/public/v1/categories')
				res.meta.status !== 200 ? uni.$showMsg() : this.categoryMenu = res.message
				// 创建二级分类菜单
				this.cateLevel2 = this.categoryMenu[0].children
				// 创建二级分类菜单
				this.cateLevel3 = this.categoryMenu[0].children[0].children
			},
			
			// 点击一级菜单跳转页面
			itemClick(index) {
				this.cate1ActiveIndex = index
				this.cateLevel2 = this.categoryMenu[index].children
				this.cate2ActiveIndex = 0
				this.cateLevel3 = this.categoryMenu[index].children[0].children
			},
			
			// 点击二级菜单跳转页面
			cate2Change(index, cate1Index) {
				this.cate2ActiveIndex = index
				this.cateLevel3 = this.categoryMenu[cate1Index].children[index].children
				this.cate3ActiveIndex = 0
			},
			
			// 获取 二级菜单 动态高度
			// getCate2Height() {
			// 	const view = uni.createSelectorQuery().in(this)
			// 	view.select(".cate_2_box").boundingClientRect(data => {
			// 		console.log('data:', JSON.stringify(data))
			// 		console.log(data.height)
			// 	})
			// }
			
			// 点击三级菜单跳转到指定 商品页面
			gotoGoodsList(item) {
				console.log(item.cat_id)
				uni.navigateTo({
					url: '/subpackage/goods_list/goods_list?cid=' + item.cat_id
				})
			}
		},
		onLoad() {
			this.getWindowHeight();
		  this.getCategoryManu();
		}
	}
</script>

<style lang="scss">
	.box {
		.scroll_box {
			width: 100%;
			display: flex;
			flex-direction: row;
			.scroll_aside {
				width: 230rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: flex-start;
				// justify-content: space-around;
				background-color: #ececec;
				.aside_item {
					padding: 20rpx;
					text-align: center;
					font-size: 14px;
					border-bottom: 1px solid #eee;
					&.active {
						background-color: #FFF;
						position: relative;
						&::before {
							content:  ' ';
							display: block;
							width: 5px;
							height: 20px;
							background-color: #409eff;
							position: absolute;
							top: 30%;
							left: 0;
							transform: translate(-50%);
						}
					}
				}
			}
			.scroll_content {
				padding: 8rpx;
				.cate_2_box {
					position: sticky;
					top: 0;
					left: 190rpx;
					background-color: #ededed;
					padding-bottom: 4rpx;
					margin: 0 auto auto 10rpx;
					border-bottom: 1px solid #ccc;
					.cate_2_item {
						font-size: 14px;
						color: #434343;
						&.cate_2_item_active {
							color: #409eff;
						}
					}
				}
				.cate_3_box {
					width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.cate_3_item {
						width: 33.33%;
						margin-top: 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.cate_img {
							width: 150rpx;
							height: 150rpx;
							margin-bottom: 5rpx;
						}
						.cate3_name {
							text-align: center;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>

